<template>
  <!-- 假警dialog-->
  <el-dialog
    title="误报"
    :visible="visible"
    :before-close="resetFun"
    class="dialog-class1"
    width="600px"
  >
    <!-- <span>您确定要将此条告警置为误报吗？</span> -->
    <el-form ref="form" label-width="112px">
      <div class="position-info">
        <editUsefulWord
          :isShowUsefulWord.sync="isShowUsefulWord"
        ></editUsefulWord>
      </div>
      <el-form-item label="研判说明" class="small" prop="desc">
        <el-input
          type="textarea"
          v-model="desc"
          placeholder="请输入"
          size="small"
          resize="none"
          style="height: 60px"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: -19px">
        <useful-word
          :desc.sync="desc"
          :isShowUsefulWord.sync="isShowUsefulWord"
        ></useful-word>
      </el-form-item>
      <el-form-item
        v-show="
          orderData.warningSource == '1' || orderData.warningSource == '4'
        "
        :style="{ margin: suppress ? '0' : '0 0 -8px 0' }"
      >
        <template slot="label">
          <div
            style="
              width: 104px;
              font-family: PingFangSC, PingFang SC !important;
              font-weight: 400 !important;
              font-size: 14px !important;
              color: #606266 !important;
            "
          >
            是否告警压制
            <el-tooltip effect="dark" placement="top">
              <div slot="content">
                如开启告警压制，将按照同一设备同一告警类型在规定时间内进行压制处理，<br />压制的告警将放到回收站中
              </div>
              <div class="text" style="margin-left: -2px">?</div>
            </el-tooltip>
            <label style="margin-left: -10px"></label>
            <span></span>
          </div>
        </template>
        <el-switch v-model="suppress" active-text="" inactive-text="">
        </el-switch>
      </el-form-item>
      <div>
        <div v-if="suppress" style="margin: 2px 0 12px; padding-left: 27px">
          <div>
            <el-radio-group v-model="suppressTime" @change="timeChange()">
              <el-radio :label="1">5分钟不再告警</el-radio>
              <el-radio :label="2">1小时不再告警</el-radio>
              <el-radio :label="3">今天不再告警</el-radio>
            </el-radio-group>
          </div>
          <div style="padding-left: 64px; margin-top: 18px">
            <span style="margin-left: 12px">
              <el-radio-group v-model="suppressTime">
                <el-radio :label="4">自定义</el-radio>
              </el-radio-group>
            </span>
            <span class="input-custom">
              <el-input
                :disabled="suppressTime != 4"
                v-model="inputDay"
                oninput="value=value.replace(/[^\d]/g,'');if(value>30)value=30;if(value.length>2)value=value.slice(0,2)"
                class="timeborderStyle"
                style="margin-left: 10px"
                placeholder="请输入"
              >
                <template slot="append">&nbsp;&nbsp;天&nbsp;</template>
              </el-input>
              <el-input
                :disabled="suppressTime != 4"
                v-model="inputHours"
                oninput="value=value.replace(/[^\d]/g,'');if(value>24)value=24;if(value.length>2)value=value.slice(0,2)"
                class="timeborderStyle"
                style="margin: 0 8px"
                placeholder="请输入"
              >
                <template slot="append">小时</template>
              </el-input>
              <el-input
                :disabled="suppressTime != 4"
                v-model="inputMin"
                oninput="value=value.replace(/[^\d]/g,'');if(value>60)value=60;if(value.length>2)value=value.slice(0,2)"
                class="timeborderStyle"
                placeholder="请输入"
              >
                <template slot="append">分钟</template>
              </el-input>
            </span>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="submitFun" type="primary" style="margin-right: 10px"
        >确 定</el-button
      >
      <el-button @click="resetFun">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { $getUrlParam } from "@/utils/public";
import {
  checkAlarmOrder,
  createIntercept,
} from "@/api/modules/eventManagement/eventDialog/falseWarnDialog";
import UsefulWord from "@/views/pages/eventManagement/eventDialog/usefulWord";
import editUsefulWord from "@/views/pages/eventManagement/eventDialog/editUsefulWord";

export default {
  name: "falseWarnDialog",
  components: {
    UsefulWord,
    editUsefulWord,
  },
  data() {
    return {
      inputDay: "",
      inputHours: "",
      inputMin: "",
      desc: "",
      suppress: false,
      suppressTime: "",
      isShowUsefulWord: false, // 是否显示常用语列表
    };
  },
  props: {
    orderData: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    timeChange() {
      this.inputDay = "";
      this.inputHours = "";
      this.inputMin = "";
    },
    //提交
    submitFun() {
      if (this.suppress) {
        if (this.suppressTime.length == 0) {
          $message.warning("请选择告警压制时间！");
          return;
        }
        if (this.suppressTime == "4") {
          if (
            this.inputDay.length == 0 &&
            this.inputHours.length == 0 &&
            this.inputMin.length == 0
          ) {
            $message.warning("请选择告警压制时间！");
            return;
          }

          if (this.inputDay == 30) {
            if (this.inputHours > 0 || this.inputMin > 0) {
              $message.warning("告警压制时间最少为1分钟，最多为30天！");
              return;
            }
          }
          if (this.inputDay == 0) {
            if (this.inputHours == 0 && this.inputMin == 0) {
              $message.warning("告警压制时间最少为1分钟，最多为30天！");
              return;
            }
          }
        }
        let suppressTemp = "";
        if (this.suppressTime == "1") {
          suppressTemp = 5;
        }
        if (this.suppressTime == "2") {
          suppressTemp = 60;
        }
        if (this.suppressTime == "3") {
          suppressTemp = 1440;
          var date = new Date();
          var now = date.getTime();
          date.setHours(0);
          date.setMinutes(0);
          date.setSeconds(0);
          var t2 = new Date(date.getTime() + 1000 * 60 * 60 * 24);
          suppressTemp = Math.round((t2 - now) / 1000 / 60);
        }
        if (this.suppressTime == "4") {
          suppressTemp =
            this.inputDay * 1440 + this.inputHours * 60 + this.inputMin * 1;
        }

        let timeParams = {
          appVerCode: this.$store.getters.userInfo.chooseAppVerCode,
          deviceCode: this.orderData.deviceCode,
          warningTypeId: this.orderData.warningTypeId,
          interceptTime: suppressTemp,
        };
        createIntercept(timeParams).then((res) => {
          let msgId = {
            id: this.orderData.warningOrderId,
            status: this.orderData.orderStatus,
          };
          this.$store.dispatch("closeSocketMsg", msgId);
          if (res.code == 200) {
            console.log(res.msg);
          } else {
            $message.warning(res.msg);
            return false;
          }
        });
      }
      let _this = this;
      if (_this.desc.length > 200) {
        $message.warning("研判说明不能超过200字！");
        return;
      }
      let params = {
        orderId: _this.orderData.warningOrderId,
        warningOrderId: _this.orderData.warningOrderId,
        orderStatus: "0", //0-假警、2-真警、7-重复报警
        remark: _this.desc, //虚假告警说明，假警时必填
        checkMan: _this.$store.getters.userInfo.userId, //研判人员ID
        duplicateOrderId: "", //重复的告警单ID，重读告警时必填
        linkId: "0",
        flowId: _this.orderData.flowId,
      };
      if (_this.orderData.provinceId != "") {
        params["provinceId"] = _this.orderData.provinceId;
        params["cityId"] = _this.orderData.cityId;
        params["countyId"] = _this.orderData.countyId;
        params["address"] = _this.orderData.address;
      }
      if (_this.orderData.longitude != "0") {
        params["longitude"] = _this.orderData.longitude;
        params["latitude"] = _this.orderData.latitude;
      }
      if (this.orderData.updateAddress) {
        params.gridId = this.orderData.gridId;
        params.gridName = this.orderData.gridName;
        params.horiAzimuthAngle = this.orderData.horiAzimuthAngle;
        params.checkGridFlag = "1"; // 是否修改网格员  1 是  0 否
      } else {
        params.checkGridFlag = "0";
      }
      params.devicePitch = this.orderData.devicePitch; // 俯仰角
      params.alarmReason = this.orderData.alarmReason; // 告警原因
      params.deviceHorizontal = this.orderData.deviceHorizontal; // 水平角
      if (_this.orderData.importanceLevel != "") {
        params["importanceLevel"] = _this.orderData.importanceLevel;
      }
      if (_this.orderData.warningTypeId != "") {
        params["warningTypeId"] = _this.orderData.warningTypeId;
      }
      params.realLinkType = "0";
      params.flowLinkType = "0";
      params.isNextLink = "1";
      params.isSign = "0";
      params.processDTOList = [];

      checkAlarmOrder(params).then((resp) => {
        if (resp && resp.code == 200) {
          $message.success("研判成功");
          _this.onSuccess();
          _this.resetForm();
        } else {
          $message.warning(resp.msg);
        }
      });
      _this.$emit("update:visible", false);
    },
    onSuccess() {
      const url =
        $getUrlParam("pageType") === "false"
          ? "/eventManagement"
          : "/eventManagement/myEvent";
      this.$store.dispatch("tagsView/delView", this.$route);
      location.reload();
      this.$router.push(url);
    },
    resetFun() {
      this.desc = "";
      this.inputDay = "";
      this.inputHours = "";
      this.inputMin = "";
      this.suppress = false;
      this.suppressTime = "";
      this.$emit("update:visible", false);
    },
    resetForm() {
      this.desc = "";
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  text-align: center;
  padding-bottom: 0px;
  padding-top: 0px;
}
/deep/ .submitClass {
  background: #ff6a6c !important;
  color: #ffffff !important;
}
/deep/ .timeborderStyle {
  width: 120px;
  height: 32px;
}
/deep/ .el-input-group__append {
  border-left: 0;
  border-radius: 0;
  padding: 0 8px;
  background-color: #f6f3f7;
}
.question {
  width: 14px;
  height: 40px;
  margin-left: 10px;
  display: flex;
  flex-wrap: nowrap;
}
.text {
  width: 14px;
  height: 14px;
  background: #ffa940;
  border-radius: 7px;
  line-height: 14px;
  color: #ffffff;
  font-size: 12px;
  margin: 8px;
  text-align: center;
  display: inline-block;
}
/deep/ .el-form-item__content {
  text-align: left;
}
// /deep/ .el-switch {
//   vertical-align: top;
// }
/deep/ .el-input.is-disabled .el-input__inner {
  border: 1px solid #dcdfe6 !important;
  border-radius: 0;
}
/deep/ .el-input-group--append .el-input__inner,
.el-input-group__prepend {
  border-radius: 0;
}
/deep/ .el-switch {
  .el-switch__label.is-active {
    display: none;
  }

  .el-switch__label--left {
    position: absolute;
    z-index: 1;
    left: 5px;
    margin-right: 0px;
    color: #fff;
    line-height: 19px;
    span {
      font-size: 12px;
    }
  }

  .el-switch__label--right {
    position: absolute;
    z-index: 1;
    right: 6px;
    margin-left: 0px;
    color: #fff;
    line-height: 19px;
    span {
      font-size: 12px;
    }
  }
}
/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
}
/deep/.el-radio__label {
  margin-left: -6px !important;
}
/deep/.input-custom .el-input input {
  padding: 0 !important;
  text-align: center;
}
.position-info {
  padding-right: 5px;
  margin-bottom: 5px;
}
.dialog-class1 {
  /deep/ .el-dialog > .el-dialog__header {
    padding: 12px;
    height: 48px;
  }
  /deep/ .el-dialog {
    border-radius: 4px;
  }
  /deep/ .el-dialog > .el-dialog__body {
    padding: 0 6px;
  }
  /deep/ .el-textarea__inner {
    height: 60px;
  }
  /deep/ .el-form-item .el-form-item__label {
    padding-right: 9px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
  }
  /deep/ .el-dialog > .el-dialog__footer {
    padding: 12px;
  }
  /deep/ .el-button.el-button--small {
    height: 32px;
    border-radius: 4px;
  }
}
</style>
